<template>
  <div class="new-page" :style="`min-height: ${pageMinHeight}px`">
    <a-card style="margin-top: 24px">
      <div slot="title" class="listTitle">
        <a-button type="primary" @click="onAdd">新建</a-button>
      </div>
      <a-table
        bordered
        :data-source="userList"
        :columns="columns"
        :rowKey="
          (record, index) => {
            return index
          }
        "
        :pagination="pagination"
      >
        <!-- <template slot="action" slot-scope="text, record">
					<a-switch />
				</template> -->
        <template slot="operation" slot-scope="text, record">
          <a-button type="link" @click="onEdit(record)">编辑</a-button>
          <a-popconfirm
            title="确认删除该用户吗?"
            @confirm="() => onDelete(record)"
          >
            <a-button class="del-btn" type="link">删除</a-button>
          </a-popconfirm>
        </template>
      </a-table>
      <!-- 新增/修改 -->
      <Modal ref="modal" @confirm="onConfirm" />
    </a-card>
  </div>
</template>

<script>
import { dataSource as ds } from '@/services'
import { mapState } from 'vuex'
import config from './config.js'
import Modal from './components/modal'
export default {
  name: 'school',
  components: {
    Modal
  },
  data() {
    return {
      loading: false,
      columns: config.columns,
      userList: [],
      pages: {
        page: 1,
        pageSize: 10,
        total: 0
      }
    }
  },
  computed: {
    ...mapState(['pageMinHeight']),
    pagination() {
      return {
        size: 'default',
        current: this.pages?.page || 1,
        pagesize: this.pages?.pagesize || 10,
        total: this.pages?.total || 0,
        showSizeChanger: true,
        showLessItems: true,
        pageSizeOptions: ['10', '20', '50'],
        showTotal: (total, range) => {
          ;`第 ${range[0]}-${range[1]} 条，总计 ${total} 条`
        },
        onChange: this.onChangePage,
        onShowSizeChange: this.onChangeSize
      }
    }
  },
  mounted() {
    this.getUserList()
  },
  methods: {
    getUserList() {
      this.loading = true
      const { page, pageSize } = this.pages
      ds.userList({ page, pageSize }).then((res) => {
        if (res?.data.code == 200) {
          this.loading = false
          const { records, current, size, total } = res?.data?.data
          this.userList = records ?? []
          this.pages = {
            page: current ?? 1,
            pageSize: size ?? 10,
            total: total ?? 0
          }
        }
      })
    },
    // 新增
    onAdd() {
      this.$refs.modal.open({ caption: '新增', type: 'add' })
    },
    // 修改
    onEdit(e) {
      this.$refs.modal.open({ caption: '编辑', type: 'edit', ...e })
    },
    // 删除用户
    onDelete(e) {
      ds.delUser({ id: e.id }).then((res) => {
        if (res?.data?.code == 200) {
          this.$message.success('删除成功!')
          this.getUserList()
        }
      })
    },
    // 新增/修改
    onConfirm() {
      this.getUserList()
    },
    onChangePage(page, size) {
      this.pages.page = page
      this.pages.pageSize = size
      this.getUserList()
    },
    onChangeSize(page, size) {
      this.pages.page = page
      this.pages.pageSize = size
      this.getUserList()
    }
  }
}
</script>

<style lang="less"></style>
